<template>
  <div id="con-order">
    <div class="tab-wrap">
      <div>
        <el-tabs v-model.trim="curType" @tab-click="handleClick">
          <el-tab-pane :label="item.name" :name="item.value" v-for="item in partTypeList" :key="item.name">
          </el-tab-pane>
        </el-tabs>
      </div>
      <div>
        <el-button icon="iconfont icon-jiufuqianbaoicon06" size="mini" class="exportBtn add" @click="addOrder">
          发起供货订单
        </el-button>
      </div>
    </div>
    <div class="list-container">
      <div style="margin-bottom: 20px" class="search-con">
        <el-select v-model="contractId" filterable placeholder="请选择" size="small" @change="contractChange">
          <el-option v-for="item in conOptions" :key="item.value" :label="item.numberAndName" :value="item.id">
          </el-option>
        </el-select>
        <el-tooltip effect="light" :content="contractContent" placement="top">
          <div class="exhibit text_hidde">{{ contractContent }}</div>
        </el-tooltip>
        <div style="margin-left: 20px; width: 150px" class="text_hidde">创建人：{{ createBy || '-- ' }}</div>
      </div>
      <all-orders
        v-if="curType == '0'"
        :contractId="contractId"
        @update="updateOrder"
        @check="checkOrder"
        @supply="exportSupply"
        @evaluation="evaluation"
        @exportfile="exportChange"
        ref="orderTable"
        @ship="shipOrder"
      ></all-orders>
      <inactive-order
        v-if="curType == '1'"
        :contractId="contractId"
        @supply="exportSupply"
        @update="updateOrder"
        @check="checkOrder"
        ref="orderTable"
      ></inactive-order>
      <pending-orders
        v-if="curType == '2'"
        :contractId="contractId"
        @check="checkOrder"
        @supply="exportSupply"
        ref="orderTable"
        @ship="shipOrder"
      ></pending-orders>
      <acceptance-order
        :contractId="contractId"
        @check="checkOrder"
        @exportfile="exportChange"
        ref="orderTable"
        v-if="curType == '3'"
      ></acceptance-order>
      <completed-order
        v-if="curType == '4'"
        @exportfile="exportChange"
        :contractId="contractId"
        @check="checkOrder"
        @evaluation="evaluation"
        ref="orderTable"
      ></completed-order>
    </div>
    <el-dialog
      width="1200px"
      :center="true"
      :title="orderTitle"
      v-if="orderVisiable"
      :before-close="closeDialog"
      :close-on-click-modal="false"
      :visible.sync="orderVisiable"
    >
      <add-order-from @close="closeOrderVisiable" :orderId="orderId"></add-order-from>
    </el-dialog>
    <el-dialog
      width="1200px"
      :center="true"
      title="发货填写页"
      v-if="shipVisiable"
      :before-close="closeDialog"
      :close-on-click-modal="false"
      :visible.sync="shipVisiable"
    >
      <ship-from :orderId="orderId" :contractId="contractId" @close="shipClose" @saveShip="saveShip"></ship-from>
    </el-dialog>
    <el-dialog
      width="1200px"
      :center="true"
      :title="checkTitle"
      v-if="checkVisiable"
      :before-close="closeDialog"
      :close-on-click-modal="false"
      :visible.sync="checkVisiable"
    >
      <check-order-from :orderId="orderId" :ship="ship" :isComplete="isComplete"></check-order-from>
    </el-dialog>
    <el-dialog
      width="400px"
      :center="true"
      title="提示"
      v-if="exportVisiable"
      :before-close="closeDialog"
      :close-on-click-modal="false"
      :visible.sync="exportVisiable"
    >
      <div class="export-wrap">
        <el-button class="xg commonBtn1" @click="handelClick('供货')"> 导出供货清单 </el-button>
        <el-button class="xg commonBtn1" @click="handelClick('验收')"> 导出验收清单 </el-button>
      </div>
    </el-dialog>
    <el-dialog
      v-if="evaluationVisible"
      class="dialog_detail"
      :center="true"
      append-to-body
      :close-on-click-modal="false"
      width="1200px"
      title="合同订单对供应商评价"
      lock-scroll
      :visible.sync="evaluationVisible"
    >
      <bidding-evaluation
        :bidid="orderId"
        :evaluateType="3"
        :bidEnterpriseId="companyId"
        @close="close"
      ></bidding-evaluation>
    </el-dialog>
  </div>
</template>

<script>
import BiddingEvaluation from '../../../components/BiddingEvaluation.vue'
import AcceptanceOrder from './components/AcceptanceOrder.vue'
import AddOrderFrom from './components/AddOrderFrom.vue'
import allOrders from './components/allOrders.vue'
import CheckOrderFrom from './components/CheckOrderFrom.vue'
import CompletedOrder from './components/CompletedOrder.vue'
import InactiveOrder from './components/InactiveOrder.vue'
import PendingOrders from './components/PendingOrders.vue'
import ShipFrom from './components/ShipFrom.vue'
export default {
  components: {
    allOrders,
    AddOrderFrom,
    CheckOrderFrom,
    ShipFrom,
    InactiveOrder,
    PendingOrders,
    AcceptanceOrder,
    CompletedOrder,
    BiddingEvaluation
  },
  data() {
    return {
      scopeObj: {},
      evaluationVisible: false,
      exportVisiable: false,
      shipVisiable: false,
      checkVisiable: false,
      isComplete: false,
      ship: false,
      orderTitle: '',
      checkTitle: '',
      companyId: '',
      orderId: '',
      createBy: '',
      contractContent: '',
      enterpriseType: localStorage.getItem('enterpriseType'),
      orderVisiable: false,
      contractId: '',
      conOptions: [],
      curType: '0',
      partTypeList: [
        {
          value: '0',
          name: '所有订单'
        },
        {
          value: '1',
          name: '未生效'
        },
        {
          value: '2',
          name: '待发货'
        },
        {
          value: '3',
          name: '待验收'
        },
        {
          value: '4',
          name: '已完成'
        }
      ]
    }
  },
  beforeMount() {
    this.getSelection()
  },
  mounted() {},
  methods: {
    close() {
      this.evaluationVisible = false
    },
    evaluation(val) {
      this.companyId = val.providerId
      this.orderId = val.id
      this.evaluationVisible = true
    },
    handelClick(val) {
      if (val === '供货') {
        this.exportSupply(this.scopeObj)
        this.exportVisiable = false
      } else {
        this.exportAcceptance(this.scopeObj)
        this.exportVisiable = false
      }
    },
    // 导出供货清单
    exportSupply(val) {
      this.$https({
        method: 'get',
        url: '/contractOrder/exportOrderList?id=' + val.id
      })
        .then(res => {
          if (res.code == 0) {
            this.common.downloadFile(res.data, '供货清单.xls')
            this.scopeObj = {}
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 导出验收清单
    exportAcceptance(val) {
      this.$https({
        method: 'get',
        url: '/contractOrder/exportAcceptList?id=' + val.id
      })
        .then(res => {
          if (res.code === 0) {
            let data = JSON.parse(res.data)
            data.forEach(item => {
              this.common
                .getBlob(item.response.data)
                .then(res => {
                  this.common.saveAs(res, item.name)
                })
                .catch(err => {
                  console.log(err)
                })
            })
            this.scopeObj = {}
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    exportChange(val) {
      this.exportVisiable = true
      this.scopeObj = val
    },
    saveShip() {
      this.shipVisiable = false
      this.$refs.orderTable.getData()
    },
    shipClose() {
      this.shipVisiable = false
    },
    handleClick(val) {
      this.curType = val.index
      this.$nextTick(() => {
        this.$refs.orderTable.getData()
      })
    },
    // 查看
    checkOrder(scope) {
      this.orderId = scope.id
      this.ship = false
      this.isComplete = false
      switch (scope.processState) {
        case 101:
          this.checkTitle = '查看未生效订单'
          break
        case 104:
          this.checkTitle = '查看待发货订单'
          break
        case 105:
          this.checkTitle = '查看待验收订单'
          this.ship = true
          break
        case 106:
          this.checkTitle = '查看已完成订单'
          this.ship = true
          this.isComplete = true
          break
        default:
          break
      }
      this.checkVisiable = true
    },
    shipOrder(scope) {
      this.orderId = scope.id
      this.contractId = scope.contractId
      this.shipVisiable = true
    },
    // 撤销后编辑供货订单
    updateOrder(scope) {
      this.orderTitle = '编辑供货订单'
      this.orderVisiable = true
      this.orderId = scope.id
    },
    closeOrderVisiable() {
      this.orderVisiable = false
      this.$refs.orderTable.getData()
    },
    // 新增供货订单
    addOrder() {
      this.orderId = ''
      this.orderTitle = '发起供货订单'
      this.orderVisiable = true
    },
    closeDialog(done) {
      done()
    },
    getSelection() {
      this.$https({
        method: 'post',
        url: '/contract/queryContractProNameList'
      })
        .then(res => {
          if (res.code == 0) {
            if (res.data && res.data.length > 0) {
              this.conOptions = res.data
              this.contractId = res.data[0]['id']
              this.contractContent = res.data[0]['biddingContent']
              this.createBy = res.data[0]['createBy']
            }
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    contractChange(val) {
      this.conOptions.forEach(item => {
        if (item.id == val) {
          this.contractContent = item.biddingContent
          this.createBy = item.createBy
        }
      })
      this.contractId = val
    }
  }
}
</script>
<style lang="less" scoped>
#con-order {
  height: 100%;
  position: relative;
  .list-container {
    height: calc(100% - 116px);
    padding: 16px 16px 40px 16px;
  }
  .export-wrap {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .biddBtn {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 999;
  }
  .sc,
  .ty {
    color: #ff3d3d;
  }
  .add {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 114px;
  }
  .tab-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    border-bottom: 1px solid #ebebeb;
    /deep/ .el-tabs__nav-wrap::after {
      height: 0;
    }
    /deep/ .el-tabs__item {
      height: 60px;
      line-height: 60px;
    }
    /deep/ .el-tabs__header {
      margin: 0;
    }
  }
  .search-con {
    display: flex;
    align-items: center;
    /deep/.el-select {
      width: 500px;
    }
  }
  .exhibit {
    margin-left: 20px;
    padding-right: 20px;
    border-right: 1px solid #999;
    max-width: 210px;
  }
}
</style>
